import React, { Component } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Modal,
  Row,
  Col,
  Input,
  Button,
  Table,
} from 'antd';
import { FormComponentProps } from '@ant-design/compatible/es/form';

const init = {
  name: '',
  phone: '',
  pageIndex: 1,
  pageSize: 10,
};

interface SelectPperationsProps extends FormComponentProps {
  dispatch?: Dispatch;
  VisibleOperations: boolean;
  INITINFO?: any;
  ChangeOperations: (visibleOperations: boolean) => void;
  SelectAdmin: (selectAdmin: { id: number, name: string, phone: string }) => void;
}

interface SelectPperationsState {

}

@connect(({
  common: { INITINFO },
}: any) => ({ INITINFO }))

class SelectPperationsElem extends Component<SelectPperationsProps, SelectPperationsState> {
  state = {
    searchValues: init,
  }

  columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '姓名', dataIndex: 'name' },
    { title: '手机', dataIndex: 'phone' },
    {
      title: '操作',
      render: (val: any, row: any) => (
        <span
          className="operLink"
          onClick={() => this.handleSelect(row)}
        >选择
        </span>
      ),
    },
  ]

  handleCancel = () => {
    const { ChangeOperations } = this.props;
    ChangeOperations(false);
    this.setState({ searchValues: init });
  }

  handleSelect = (row: any) => {
    const { SelectAdmin } = this.props;
    SelectAdmin({ id: row.id, name: row.name, phone: row.phone });
    this.handleCancel();
  }

  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (!errors) {
        const params = {
          ...values,
          pageIndex: 1,
          pageSize: 10,
        };
        this.fetchAction('common/fetchAuthUserList', params);
      }
    });
  }

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const { searchValues } = this.state;
    const params = {
      ...searchValues,
      pageIndex,
      pageSize,
    };
    this.setState({
      searchValues: params,
    }, () => this.fetchAction('common/fetchAuthUserList', params));
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch }: any = this.props;
    const type = typeName.indexOf('common') >= 0
      ? typeName : `cabinetManagementAdd/${typeName}`;
    dispatch({ type, payload });
  }

  render() {
    const { searchValues: { pageIndex, pageSize } } = this.state;
    const {
      VisibleOperations,
      form: { getFieldDecorator },
      INITINFO: { authUserList: operationsInfo },
    } = this.props;

    const dataSource = operationsInfo ? operationsInfo.list : [];
    const pagination: object = {
      total: operationsInfo ? operationsInfo.count : 0,
      current: pageIndex,
      pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showTotal: () => `共${operationsInfo.count || 0}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    return (
      <Modal
        title="运维人员"
        visible={VisibleOperations}
        width={800}
        destroyOnClose
        footer={null}
        onCancel={this.handleCancel}
      >
        <Form className="tableListForm marginB20" onSubmit={this.handleSearch}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item>
                {getFieldDecorator('name')(<Input allowClear placeholder="请输入运维人员姓名" />)}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item>
                {getFieldDecorator('phone')(<Input allowClear placeholder="请输入运维人员手机" />)}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Button
                type="primary"
                htmlType="submit"
                className="smallButton"
              >
                查询
              </Button>
            </Col>
          </Row>
        </Form>
        <Table
          rowKey="id"
          className="statementTable"
          columns={this.columns}
          dataSource={dataSource}
          pagination={pagination}
        />
      </Modal>
    );
  }
}

export default Form.create<SelectPperationsProps>()(SelectPperationsElem);
